<template>
  <SystemItem title="隐私">
    <div class="flex flex-row justify-between py-2">
      <div>加我好友的时候验证方式</div>
      <el-select v-model="value" size="small" placeholder="Select" style="width: 140px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div style="border-top: 1px solid var(--border)" class="text-end pt-2">
      <el-button size="small">应用</el-button>
    </div>
  </SystemItem>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useUser } from "@/store/modules/user";
import SystemItem from "../components/SystemItem.vue";
import { AddCheck } from "@/types/user";

const user = useUser();
const value = ref(user.userInfo?.addCheck || AddCheck.check);
const options = [
  {
    value: 1,
    label: "允许任何人",
  },
  {
    value: 2,
    label: "需要验证信息",
  },
  {
    value: 3,
    label: "直接添加",
  },
];
</script>

<style lang="scss" scoped></style>
